// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
require('echarts/lib/chart/line')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/grid')
import { parseTime } from '@/utils/index'
const getLastDays = (nowDate: any, dayStand: number) => {
  let tempDate = new Date(nowDate)
  let tempArrData = []
  for (let i = 0; i < dayStand; i++) {
    tempArrData.unshift(
      parseTime(tempDate.getTime() - i * 24 * 60 * 60 * 1000, '{m}/{d}')
    )
  }

  return tempArrData
}
const getRandomDataPercent = (dayStand: number) => {
  let tempDate = Array(dayStand).fill(100.0)
  for (let i = 0; i <= Math.floor(dayStand / 4); i++) {
    tempDate[Math.floor(Math.random() * dayStand)] = (
      99.8 +
      0.2 * Math.random()
    ).toFixed(2)
  }
  return tempDate
}
const getRandomDataNum = (dayStand: number) => {
  let tempDate = []
  for (let i = 0; i <= dayStand; i++) {
    tempDate.push(2000 + Math.ceil(2000 * Math.random()))
  }
  return tempDate
}
export default class EchartsConfig {
  private myChart: any
  private option = {
    title: {
      text: '放款概况统计',
      subtext: ''
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['成功率', '成功数量']
    },
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月'
        ]
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        min: 0,
        max: 8000,
        axisLabel: {
          show: true,
          formatter: '{value}',
          fontWeight: 'normal',
          fontSize: 12,
          lineHeight: 22
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },

      {
        type: 'value',
        name: '',
        min: 99,
        max: 100,
        axisLabel: {
          show: true,
          formatter: '{value} %',
          fontWeight: 'normal',
          fontSize: 12,
          lineHeight: 22
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '成功率',
        type: 'line',
        data: [0],
        markPoint: {
          data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' }
          ]
        },
        yAxisIndex: 1,
        markLine: {
          data: [{ type: 'average', name: '平均值' }]
        }
      },
      {
        name: '成功数量',
        type: 'bar',
        data: [0],
        markPoint: {
          data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: '平均值' }]
        }
      }
    ]
  }

  constructor(domId: string) {
    this.myChart = echarts.init(document.getElementById(domId))
  }
  public setOption(config: any) {
    this.option.title.subtext = config.name
    let tempXDate = getLastDays(config.end, config.dayStand)
    this.option.xAxis[0].data = tempXDate
    this.option.series[0].data = getRandomDataPercent(config.dayStand)
    this.option.series[1].data = getRandomDataNum(config.dayStand)
    this.myChart && this.myChart.setOption(this.option)
  }
}
